Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {
GetStaticPaths,
GetStaticProps,
NextComponentType,
NextPageContext,
} from "next";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { useRouter } from "next/router";
import { dehydrate, QueryClient, useQuery } from "react-query";
import { Show } from "../../../components/book/Show";
import { PagedCollection } from "../../../types/collection";
import { Book } from "../../../types/Book";
import { fetch, FetchResponse, getItemPaths } from "../../../utils/dataAccess";
import { useMercure } from "../../../utils/mercure";
const getBook = async (id: string | string[] | undefined) =>
id ? await fetch<Book>(`/books/${id}`) : Promise.resolve(undefined);
const Page: NextComponentType<NextPageContext> = () => {
const router = useRouter();
const { id } = router.query;
const { data: { data: book, hubURL, text } = { hubURL: null, text: "" } } =
useQuery<FetchResponse<Book> | undefined>(["book", id], () => getBook(id));
const bookData = useMercure(book, hubURL);
if (!bookData) {
return <DefaultErrorPage statusCode={404} />;
}
return (
<div>
<div>
<Head>
<title>{`Show Book ${bookData["@id"]}`}</title>
</Head>
</div>
<Show book={bookData} text={text} />
</div>
);
};
export const getStaticProps: GetStaticProps = async ({
params: { id } = {},
}) => {
if (!id) throw new Error("id not in query param");
const queryClient = new QueryClient();
await queryClient.prefetchQuery(["book", id], () => getBook(id));
return {
props: {
dehydratedState: dehydrate(queryClient),
},
revalidate: 1,
};
};
export const getStaticPaths: GetStaticPaths = async () => {
const response = await fetch<PagedCollection<Book>>("/books");
const paths = await getItemPaths(response, "books", "/books/[id]");
return {
paths,
fallback: true,
};
};
export default Page;